<template>
  <div class="login">
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" color="#fb7924" />
      </div>
    </van-overlay>
    <van-nav-bar fixed :title="$t('component.login.1')" left-arrow :border="false" @click-left="handleBack" />
    <div class="modal-form">
          <van-form>
            <p>Email</p>
            <van-field v-model="registerParams.email" :placeholder="$t('component.login.3')" />
            <p>Mobile</p>
            <van-field v-model="registerParams.mobile" placeholder="Telefone" />
            <p>Password</p>
            <van-field type="password" v-model="registerParams.password" :placeholder="$t('component.login.5')" />
            <p>RePassword</p>
            <van-field type="password" v-model="registerParams.rePassword" :placeholder="$t('component.login.5')" />

          </van-form>
          <van-radio-group v-model="checked" checked-color="#fb8c24">
            <van-radio name="1" shape="square">
              <span class="provicy" @click.stop="provicyDialog = true">{{ $t("component.login.12") }}</span>
            </van-radio>
          </van-radio-group>

          <div class="modal-form-btn mv20">
            <button @click="handleRegister">{{ $t("component.login.6") }}</button>
          </div>
    </div>
    <div @click="openVisible" class="go-login">Já tem uma conta para entrar</div>
    <!-- 登陆弹框 -->
    <van-dialog  :title="translate('component.login.1')" v-model="showVisible" :showConfirmButton="false" closeOnClickOverlay>
      <div class="modal-form">
        <van-form :model="params" ref="loginForm" :rules="rules" label-width="100px">
          <p>Email</p>
          <van-field  v-model="params.username" :placeholder="translate('component.login.2')" prop="username"></van-field>
          <p>Password</p>
          <van-field  v-model="params.password" :placeholder="translate('component.login.4')" prop="password"> </van-field>
        </van-form>
        <div class="modal-form-btn mv40">
          <button @click="handleLogin">{{ translate('component.login.6') }}</button>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { doLogin } from "@/utils/google";
import { doLogin as fbLogin } from "@/utils/facebook";
import { isEmail } from "@/utils";
import router from "@/router";
import Api from "@/api";
import { Toast } from "vant";
export default {
  name: "Login",
  data() {
    const uuid = this.uuid();
    return {
      activeTab: "login",
      params: {
        username: "",
        password: "",
        uuid: uuid,
      },
      registerParams: {
        email: "",
        password: "",
        mobile:""
      },
      provicyDialog: false,
      checked: "",
      show:false,
      authParam:{
        authUuid:"",
        source:""
      },
      rules: {
        username: [
          { required: true, message: window.$lang.t('register.12'), trigger: 'blur' },
        ],
        password: [{ required: true, message: window.$lang.t('register.20'), trigger: 'blur' }],
      },
      showVisible:false
    };
  },
   created() {
    this.authParam.authUuid = this.$route.query.uuid
    this.authParam.source = this.$route.query.source
    if(!this.$route.query.uuid||!this.$route.query.source){
      this.$router.push('/')
    }
    if (this.authParam.source === 'facebook'){
      this.registerParams.no = this.$route.query.authInfo.name
      this.registerParams.avatar = this.$route.query.authInfo.head
      this.registerParams.email = this.$route.query.authInfo.email
      // eslint-disable-next-line no-empty
    }else if(this.authParam.source === 'google'){
      this.registerParams.no = this.$route.query.authInfo.getName();
      this.registerParams.avatar = this.$route.query.authInfo.getImageUrl();
      this.registerParams.email = this.$route.query.authInfo.getEmail();
    }
    // console.log("路由过来的参数"+JSON.stringify(this.$route.query.authInfo))
    // alert(JSON.stringify(this.$route.query.authInfo))
  },
  methods: {
    translate(str) {
      return window.$lang.t(str);
    },
    openVisible(){
      this.showVisible  = true
      this.params = {
        username: "",
        password: "",
        uuid: this.uuid(),
      }
    },
    handleLogin() {
      const { username, password } = this.params;
      if (!username) {
        this.$toast(window.$lang.t("component.login.3"));
        return;
      }
      if (!password) {
        this.$toast(window.$lang.t("component.login.5"));
        return;
      }
      this.params = {...this.params,...this.authParam}
      Api.login(this.params).then((res) => {
        if (res.token) {
          window.localStorage.setItem("TOKEN", res.token);
          this.showVisible = false
          this.$router.push("/");
        }else{
          this.$toast.fail(res.data.msg)
        }
      });
    },
    handleRegister() {
      if (!this.checked) {
        Toast("Por favor, Concorde com o acordo EM primeiro lugar.");
        return;
      }
      if (!this.registerParams.email) {
        Toast("Insira e-mail");
        return;
      }
      if (!isEmail(this.registerParams.email)) {
        Toast("O E-mail ilegal");
        return;
      }
      if (!this.registerParams.password) {
        Toast("Insira a palavra-passe");
        return;
      }
      if (this.registerParams.password !== this.registerParams.rePassword) {
        Toast("Duas palavras-passe não coincidem");
        return;
      }
      this.registerParams = Object.assign(this.registerParams, this.authParam)
      Api.register(this.registerParams).then((res) => {
        if (res.token) {
          window.localStorage.setItem("TOKEN", res.token);
          this.$router.push("/");
        }
      });
    },
    // 获取uuid
    uuid() {
      const s = [];
      const hexDigits = "0123456789abcdef";
      for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
      s[8] = s[13] = s[18] = s[23];
      this.uuidA = s.join("");
      return this.uuidA;
    },
    handleBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  min-height: 100vh;
  padding-top: 62px;
  background: #fff;
  box-sizing: border-box;
}
/deep/ .van-tabs__line {
  background-color: #fb7924;
}
.modal-form {
  background: #fff;
  border-radius: 8px;
  padding: 20px 32px;
  .van-field {
    box-sizing: border-box;
    margin-bottom: 16px;
    border: 1px solid #e8e8e8;
    line-height: 20px;
  }
}

.modal-form-btn button {
  width: 100%;
  height: 40px;
  background: #fb7924;
  border-radius: 4px;
  color: #fff;
  line-height: 40px;
  border: none;
  outline: none;
  cursor: pointer;
  &:active {
    background: #e27e20;
  }
}
.modal-form-register {
  font-size: 16px;
  color: #fb8c24;
}
.modal-form-forget {
  font-size: 16px;
  color: #595959;
}

.login-btns {
  margin: 20px 0;
}
.btn-facebook {
  width: 100%;
  margin-bottom: 16px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border: 1px solid #39558e;
  color: #39558e;
  border-radius: 4px;
  cursor: pointer;
}
.btn-google {
  width: 100%;
  margin-bottom: 16px;
  text-align: center;
  line-height: 40px;
  height: 40px;
  border: 1px solid #ea4335;
  color: #ea4335;
  border-radius: 4px;
  cursor: pointer;
}
.btn-facebook:hover,
.btn-google:hover {
  opacity: 0.8;
  background-color: #ddd;
}
.icon-facebook {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 100%;
  text-align: center;
  line-height: 24px;
  background-color: #39558e;
  color: #fff;
}
.icon-google {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 100%;
  text-align: center;
  line-height: 24px;
  background-color: #ea4335;
  color: #fff;
}
.provicy {
  text-align: center;
  color: #999999;
  cursor: pointer;
}
.provicy-title {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  line-height: 30px;
}
.provicy-content {
  text-align: left;
  line-height: 1.5;
}
.provicy-sub {
  font-weight: bold;
  line-height: 2;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
.go-login{
  color: #ea4335;
  cursor: pointer;
  text-decoration: underline;
  margin: 20px 0 30px 35px;
}
</style>
